<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>湍流分布</title>
    <script src="../echarts.min.js"></script>
    <script src="../lodash.min.js"></script>
    <style>
        .flex{
            display: flex;
        }
    </style>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div class="flex">
        <div id="mainl" style="width: 50%; height: 500px"></div>
        <div id="mainr" style="width: 50%; height: 500px"></div>
    </div>
    

    <script>
        // 指定图标的配置项和数据
        let seriesIteml = {
            type: 'bar',
            seriesLayoutBy: 'row',
            symbol:'none',  //这句就是去掉点的  
            smooth:true,  //这句就是让曲线变平滑的
        }
        let seriesItemr = {
            type: 'line',
            seriesLayoutBy: 'row',
            symbol:'none',  //这句就是去掉点的  
            smooth:true,  //这句就是让曲线变平滑的
            // areaStyle: {}
        }
        let option = {
            color: ['#FF9E33','#FFD82E','#5554FF', '#60E960','#60E960', '#FF9E33', '#FFD82E'],
            textStyle: {
                color: '#fff'
            },
            legend: {
                orient: 'vertical',
                top: '10%',
                right: '10%',
                borderColor: '#1465A6',
                borderWidth: 2,
                borderRadius: 2,
                padding: 20,
                // itemWidth: 30,
                itemHeight: 0,
                itemGap: 20, // 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
                textStyle: {
                    color: '#fff'
                },
            },
            tooltip: {},
            dataset: {
                source: [
                    ['product', 0, 5, 10, 15, 20, 25],
                    // ['A级',88, 20, 15, 8, 7, 5],
                    // ['B级', 70, 18, 14, 7, 6, 4],
                    // ['C级', 66, 15, 14, 6, 4, 2],
                    // ['1#', 41.1, 30.4, 65.1, 53.3, 43, 2],
                    // ['2#', 86.5, 92.1, 85.7, 83.1, 22, 67],
                ]
            },
            grid: {
                // show: true,
                top: '20%',
                left: '4%',
                right: '20%',
                bottom: '10%',
                containLabel: true // grid 区域是否包含坐标轴的刻度标签。
            },
            xAxis: {
                name: '风速(M/S)',
                type: 'category',
                nameLocation: 'center', // 坐标轴名称显示位置。
                nameGap: 40, //坐标轴名称与轴线之间的距离 15
                // type: 'category',
                axisLine: {
                    lineStyle: {
                        // color: 'rgba(43, 176, 217, 1)'
                        color: '#153E6A'
                    }
                },
                // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
                // boundaryGap: ['70%', '70%'],
                boundaryGap: false,
                // data: [0, 5, 10, 15, 20, 25]
            },
            yAxis: {
                name: '风速概率(%)',
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(43, 176, 217, 0.3)'
                    }
                },
                // 坐标轴在 grid 区域中的分隔线。
                splitLine: {
                    // show: false,
                    lineStyle: {
                        color: 'rgba(43, 176, 217, 0.3)',
                        type: 'dashed'
                    }
                },
            },
            series: [
                seriesItemr,
                seriesItemr,
                seriesItemr,
                seriesItemr,
                seriesItemr,
            ]
        }
        // 基于准备好的DOM，初始化echarts实例
        var chartL = echarts.init(document.getElementById('mainl'));
        var chartR = echarts.init(document.getElementById('mainr'));

        chartL.clear()
        chartL.off()
        chartR.clear()
        chartR.off()

        let [option1, option2] = [{},{}]

        option1 = _.defaultsDeep(option1, option)
        option2 = _.defaultsDeep(option2, option)
        // console.log(option1)
        // console.log(option2)

        // let source1 = [
        //         // ['product', 0, 5, 10, 15, 20, 25],
        //         ['1#', 20, 30.4, 65.1, 53.3, 43, 2],
        //         ['2#', 86.5, 92.1, 85.7, 83.1, 22, 67],
        //         ['3#', 24.1, 67.2, 79.5, 86.4, 45, 34]
        //     ]

        let source2 = [
            // ['product', 0, 8, 10, 18, 20, 25],
            ['A级',88, 20, 15, 8, 7, 5],
            ['B级', 70, 18, 14, 7, 6, 4],
            ['C级', 66, 15, 12, 6, 4, 3],
            ['1#', 41.1, 30.4, 65.1, 53.3, 43, 2],
            ['2#', 86.5, 92.1, 85.7, 83.1, 22, 67],
        ]


        option1.yAxis.name = '平均湍流强度(%)'
        option2.yAxis.name = '湍流强度(%)'
        

        // option1.dataset.source = option1.dataset.source.concat(source1)
        option2.dataset.source = option2.dataset.source.concat(source2)

        let selectLen = 5
        for(let i=0; i<selectLen; i++ ) {
            // option1.series.push(seriesItem)
            option2.series.push(seriesItemr)
        }
        option2.series[0].areaStyle = {}
        option2.series[1].areaStyle = {}
        option2.series[2].areaStyle = {}


        
        // 使用刚指定的配置项和数据显示图表
        // chartL.setOption(option1)
        chartR.setOption(option2)
    </script>
</body>
</html>